<template>
    <section>
        <canvas ref="cav"/>
    </section>
</template>

<script>
    import {getRandomColor} from "@/utils/tools";

    export default {
        //圆形扩散、运动轨迹
        name: "canvas-animate",
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let cavDom = this.$refs.cav
                cavDom.width = window.innerWidth - 210
                cavDom.height = window.innerHeight - 44
                let ww = cavDom.width
                let wh = cavDom.height
                let ctx = cavDom.getContext('2d')

                //  定义圆类

                class Circle {
                    constructor(x, y) {
                        /*
                        * 圆点坐标：(x0,y0)
                          半径：r
                          角度：a0

                          则圆上任一点为：（x1,y1）
                          x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )
                          y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )
                        * */
                        this.r = Math.random() * 6
                        let deg = Math.random() * 360
                        this.x = ww / 2 + 300 * Math.cos(deg * Math.PI / 180)
                        this.y = wh / 2 + 300 * Math.sin(deg * Math.PI / 180)

                        this.color = getRandomColor()
                    }

                    update() {
                        this.r += 0.5;
                        if (this.r > 30) {
                            this.r = 0
                        }
                    }

                    draw(x, y) {
                        ctx.globalAlpha = 0.95;
                        ctx.beginPath()
                        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
                        ctx.lineWidth = 2; //线条宽度
                        ctx.strokeStyle = 'rgba(250,250,50,1)'; //颜色
                        ctx.stroke();
                        ctx.closePath()
                        for (let i = 0; i < ciclesList.length; i++) {
                            ctx.beginPath()
                            ctx.moveTo(ww / 2, wh / 2)
                            ctx.lineTo(ciclesList[i].x, ciclesList[i].y)
                            ctx.strokeStyle = ciclesList[i].color
                            ctx.lineWidth = 2
                            ctx.stroke()
                            ctx.closePath()
                        }
                    }
                }

                let ciclesList = []
                for (let i = 0; i < 10; i++) {
                    ciclesList.push(new Circle())
                }

                function render() {
                    ctx.clearRect(0, 0, ww, wh)

                    ctx.beginPath()
                    ctx.arc(ww / 2, wh / 2, 300, 0, Math.PI * 2)
                    ctx.strokeStyle = 'red'
                    ctx.stroke()
                    ctx.closePath()

                    //旋转中心可以用位移到中心 然后又恢复回来
                    ctx.translate(ww / 2, wh / 2);
                    let rad = 0
                    if (rad < 360) {
                        rad += 1
                    } else {
                        rad = 0
                    }
                    ctx.rotate(rad * Math.PI / 180)
                    ctx.translate(-ww / 2, -wh / 2);
                    requestAnimationFrame(render)
                    ciclesList.forEach(e => {
                        e.draw()
                        e.update()
                    })
                }

                requestAnimationFrame(render)


            }
        }
    }
</script>

<style scoped>
    canvas {
        box-sizing: border-box;
        border-radius: 8px;
        overflow: hidden;
        background-color: #000000;
    }
</style>
